<template>
	<view>
		<loading :is_init="is_init" :show_time="300"></loading>
		<view class="p3 f28  ">
			<mp-html v-if="is_init==true" style="font-size: 28rpx;line-height: 50rpx;" :content="find.content" />
		</view>


		<CComment ref="ccRef" :userInfo="userInfo" :tableData="tableData" :tableTotal="reply_num" @likeFun="likeFun"
			@replyFun="replyFun" @first_expand="first_expand" @deleteFun="deleteFun" @tableTotal="on_tableTotal"
			:deleteMode="deleteMode">
		</CComment>

		<b-reply-footer @openComment="openComment" @oncollect="oncollect" @onlike="onlike" :like_num="like_num"
			:collect_num="collect_num" :reply_num="reply_num" :islike="islike" :iscollect="iscollect" > 
		</b-reply-footer>

	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	import CComment from "../components/cc-comment/index";
	export default {
		components: {
			CComment
		},
		data() {
			return {
				find: {},
				deleteMode: 'all',
				userInfo: {},
				is_init: false,
				reply_num: 0,
				like_num: 0,
				collect_num: 0,
				islike: false,
				iscollect:false,
				tableData: [],
			}
		},
		onLoad(obj) {
			if (uni.getStorageSync('user')) {
				this.userInfo = uni.getStorageSync('user');
			}
			this.page = 1;
			this.id = obj.id
			this.init();
		},

		methods: {
			async init() {
				var data = {
					id: this.id
				}
				const res = await this.Http.post('/plugin.php/banmitongcheng/api/Article/views', data);
				if (res.status != 200) {
					this.is_init = true;
					uni.showModal({
						title: '提示',
						content: res.msg,
						success: function(res) {
							uni.navigateBack()

						}
					});

					return
				}
				this.find = res.data.find;
				this.reply_num = this.find.reply;
				this.collect_num = this.find.collect;
				this.read_num = this.find.read;
				this.share_num = this.find.share;
				this.like_num = this.find.like;
				this.islike = this.find.islike;
				this.iscollect = this.find.iscollect;
				this.init_comments();

				this.is_init = true;

				uni.setNavigationBarTitle({
					title: this.find.title
				})

			},
			on_tableTotal(tableTotal) {
				this.reply_num = tableTotal;
			},
			// 唤起新评论弹框
			openComment() {
				this.$refs.ccRef.newCommentFun();
			},
			//文章点赞
			async onlike() {
				var data = {
					id: this.id,
				}
				const res = await this.Http.post('/plugin.php/banmitongcheng/api/Article/add_like', data);

				if (res.status == 200) {
					if (res.data) {
						this.like_num++
						this.islike = true;
					} else {
						this.like_num--
						this.islike = false;
					}
					return
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			//文章收藏
			async oncollect() {
				var data = {
					id: this.id,
				}
				const res = await this.Http.post('/plugin.php/banmitongcheng/api/Article/add_collect', data);

				if (res.status == 200) {
					if (res.data) {
						this.collect_num++
						this.iscollect = true;
					} else {
						this.collect_num--
						this.iscollect = false;
					}
					return
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			//回复列表
			async init_comments() {
				var data = {
					id: this.id,
					page: this.page,
					level: 'one'
				}
				const res = await this.Http.post('/plugin.php/banmitongcheng/api/Articlecomments/lists', data);

				let tableData = res.data.list.list.data;
				let user_list = res.data.list.user_list;
				tableData.forEach((item, i) => {
					for (var k = 0; k < user_list.length; k++) {
						if (user_list[k]['uid'] == item['uid']) {
							item.face = user_list[k]['face']
							item.nickname = user_list[k]['nickname']
						}
					}

					item.page = 0;
					item.is_expand = false;
					if (item.reply_count >= 20) {
						item.is_expand = true;
					}
				});

				this.tableData = tableData;
				console.log("tableData: " + JSON.stringify(tableData));
				this.is_init = true;


			},
			// 点赞回调事件
			async likeFun({
				params
			}, callback) {

				var data = {
					comments_id: params.id,
					id: this.id,
				}
				const res = await this.Http.post('/plugin.php/banmitongcheng/api/Articlecomments/add_like', data);

				if (res.status == 200) {
					callback(200);
					return
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				callback(0);




			},
			//展开更多回复
			async first_expand({
				params
			}, callback) {


				var data = {
					id: this.id,
					comments_id: params.id,
					page: params.page,
					level: 'two',

				}
				const res = await this.Http.post('/plugin.php/banmitongcheng/api/Articlecomments/lists', data);

				let tableData = res.data.list.list.data;
				if (tableData.length == 0) {
					callback(0);
					return
				}
				let user_list = res.data.list.user_list;
				tableData.forEach((item, i) => {
					for (var k = 0; k < user_list.length; k++) {
						if (user_list[k]['uid'] == item['uid']) {
							item.face = user_list[k]['face']
							item.nickname = user_list[k]['nickname']
						}
						if (user_list[k]['uid'] == item['reply_uid']) {
							item.reply_face = user_list[k]['face']
							item.reply_name = user_list[k]['nickname']
						}
					}
					item.owner = item.uid === this.userInfo.uid;
					item.page = 0;

				});
				callback(tableData);


			},
			// 评论回调事件
			async replyFun({
				params
			}, callback) {


				params.article_id = this.id;

				const ret = await this.Http.post('/plugin.php/banmitongcheng/api/Articlecomments/add_comments', params);
				console.log("ret: " + JSON.stringify(ret));
				if (ret.status == 200) {
					const res = {
						id: ret.data
					};
					callback(res);
					return
				}
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})
				callback(0);


			},
			/** 删除回调事件
			 * mode 删除模式
			 * -- bind: 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
			 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
			 * -- all : 删除所有评论包括回复评论
			 */

			async deleteFun({
				params,
				mode
			}, callback) {




				var data = {
					comments_id: params[0],
					id: this.id,

				}
				const res = await this.Http.post('/plugin.php/banmitongcheng/api/Articlecomments/dels', data);

				if (res.status == 200) {
					callback(200);
					return
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				callback(0);


			}


		}
	}
</script>

<style lang="scss">
	.btn {
		text-align: center;
		color: #fff;
		padding: 20rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #2979ff;
	}
</style>